<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	const orderList = ref([])
	const currentPage = ref(1)
	async function getList() {
		const res = await http.request({
			url: '/api/order/orderList',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				status: current.value,
			},
		})
		console.log(res)
		orderList.value = [...orderList.value, ...res.data]
	}

	const items = ref(['待付款', '待发货', '待收货', '已完成'])
	const current = ref(1)
	function onClickItem(index) {
		if (current.value !== index) {
			current.value = index
		}
		currentPage.value = 1
		orderList.value = []
		getList()
	}

	async function cancelOrder(id) {
		const res = await http.request({
			url: '/api/order/cancelOrder',
			method: 'POST',
			data: {
				id: id,
			},
		})
		if (res.st == 1) {
			uni.utils.toast('取消成功')
			currentPage.value = 1
			orderList.value = []
			getList()
		} else {
			uni.utils.toast(res.msg)
		}
	}

	// 查看订单详情
	function goDetail(id) {
		uni.navigateTo({
			url: `/minePage/orderdetail/index?id=${id}&from=${'mall'}`,
		})
	}

	//去付款
	async function goPay(item) {
		if (item.is_integral == 1) {
			const res = await http.request({
				url: '/api/order/integralPay',
				method: 'POST',
				data: {
					id: item.id,
				},
			})
			if (res.st == 1) {
				uni.utils.toast('支付成功，即将跳转到订单详情页面')
				currentPage.value = 1
				orderList.value = []
				setTimeout(() => {
					uni.navigateTo({
						url: `/homePage/paysuccess/index?id=${
							item.id
						}&from=${'mall'}`,
					})
				})
				// getList()
			} else {
				uni.utils.toast(res.msg)
			}
		} else {
			const res = await http.request({
				url: '/api/order/balancePay',
				method: 'POST',
				data: {
					id: item.id,
				},
			})
			if (res.st == 1) {
				uni.utils.toast('支付成功，即将跳转到订单详情页面')
				currentPage.value = 1
				orderList.value = []

				setTimeout(() => {
					uni.navigateTo({
						url: `/homePage/paysuccess/index?id=${
							item.id
						}&from=${'mall'}`,
					})
				})

				// getList()
			} else {
				uni.utils.toast(res.msg)
			}
		}
	}

	// 确认收货
	async function shure(id) {
		const res = await http.request({
			url: '/api/order/confirmOrder',
			method: 'POST',
			data: {
				id: id,
			},
		})

		if (res.st == 1) {
			uni.utils.toast('确认收货成功')
			currentPage.value = 1
			orderList.value = []
			getList()
		} else {
			uni.utils.toast(res.msg)
		}
	}

	function refresh() {
		++currentPage.value
		getList()
	}

	onShow(() => {
		currentPage.value = 1
		orderList.value = []
		getList()
	})
</script>

<template>
	<view class="order-content">
		<view class="order-category">
			<view class="category-list">
				<view
					class="list-item"
					v-for="(item, index) in items"
					:key="'items' + index"
					@click="onClickItem(index + 1)"
				>
					<view class="list-name"> {{ item }} </view>
					<view class="bar" v-if="index + 1 == current"> </view>
					<view
						class="bar"
						style="background-color: transparent"
						v-else
					>
					</view>
				</view>
			</view>
			<view class="content" v-if="orderList.length">
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 94vh"
					@scrolltolower="refresh"
				>
					<view v-if="current == 1">
						<view
							class="content-text"
							v-for="(item, index) in orderList"
							:key="'order' + index"
							@click="goDetail(item.id)"
						>
							<view class="content-title">
								<view class="title-left">
									<text style="color: #9b9b9d">订单号：</text>
									<text>{{ item.order_sn }}</text>
								</view>
								<view
									class="title-right"
									v-if="item.status == 1"
								>
									待支付
								</view>
								<view
									class="title-right"
									v-if="item.status == 2 || item.status == 3"
								>
									待发货
								</view>
								<view
									class="title-right"
									v-if="item.status == 4"
								>
									待收货
								</view>
								<view
									class="title-right"
									v-if="item.status == 5"
								>
									已完成
								</view>
							</view>
							<view class="the-order-content">
								<view
									class="order-item"
									v-for="(
										goods, goodsindex
									) in item.goods_info"
									:key="'goods' + goodsindex"
								>
									<view class="order-item-left">
										<view class="order-item-left-img">
											<image
												style="
													width: 128rpx;
													height: 128rpx;
												"
												:src="goods.img"
												mode=""
											></image>
										</view>
										<view class="order-item-left-content">
											<view class="">
												{{ goods.goods_name }}
											</view>
											<view
												class=""
												style="
													font-size: 20rpx;
													color: #898989;
												"
											>
												{{ goods.spec }}
											</view>
											<view
												class=""
												v-if="item.is_integral == 1"
											>
												积分{{ goods.integral }}
											</view>
											<view class="" v-else>
												￥{{ goods.price }}
											</view>
										</view>
									</view>
									<view class="order-item-right">
										X{{ goods.num }}</view
									>
								</view>
								<view
									class="price"
									v-if="item.status == 2 || item.status == 1"
								>
									合计：￥{{ item.pay_sum_price }}
								</view>
							</view>
							<view class="content-bottom">
								<view
									class="two-button"
									v-if="item.status == 1"
								>
									<view
										class=""
										@tap.stop="cancelOrder(item.id)"
									>
										取消订单
									</view>
									<view class="" @tap.stop="goPay(item)">
										去支付
									</view>
								</view>
								<view
									class="two-button"
									v-if="item.status == 4"
								>
									<!-- <view class=""> 查看物流 </view> -->
									<view class="" @tap.stop="shure(item.id)">
										确认收货
									</view>
								</view>
								<view
									class="one-button"
									v-if="item.status == 5"
								>
									<!-- <view class=""> 删除订单 </view> -->
								</view>
							</view>
						</view>
					</view>
					<view v-if="current == 2">
						<view
							class="content-text"
							v-for="(item, index) in orderList"
							:key="'order' + index"
							@click="goDetail(item.id)"
						>
							<view class="content-title">
								<view class="title-left">
									<text style="color: #9b9b9d">订单号：</text>
									<text>{{ item.order_sn }}</text>
								</view>
								<view
									class="title-right"
									v-if="item.status == 1"
								>
									待支付
								</view>
								<view
									class="title-right"
									v-if="item.status == 2 || item.status == 3"
								>
									待发货
								</view>
								<view
									class="title-right"
									v-if="item.status == 4"
								>
									待收货
								</view>
								<view
									class="title-right"
									v-if="item.status == 5"
								>
									已完成
								</view>
							</view>
							<view class="the-order-content">
								<view
									class="order-item"
									v-for="(
										goods, goodsindex
									) in item.goods_info"
									:key="'goods' + goodsindex"
								>
									<view class="order-item-left">
										<view class="order-item-left-img">
											<image
												style="
													width: 128rpx;
													height: 128rpx;
												"
												:src="goods.img"
												mode=""
											></image>
										</view>
										<view class="order-item-left-content">
											<view class="">
												{{ goods.goods_name }}
											</view>
											<view
												class=""
												style="
													font-size: 20rpx;
													color: #898989;
												"
											>
												{{ goods.spec }}
											</view>
											<view class="">
												￥{{ goods.price }}
											</view>
										</view>
									</view>
									<view class="order-item-right">
										X{{ goods.num }}</view
									>
								</view>
								<view
									class="price"
									v-if="item.status == 2 || item.status == 1"
								>
									合计：￥{{ item.pay_sum_price }}
								</view>
							</view>
							<view class="content-bottom">
								<view
									class="two-button"
									v-if="item.status == 1"
								>
									<view class=""> 取消订单 </view>
									<view class=""> 去支付 </view>
								</view>
								<view
									class="two-button"
									v-if="item.status == 4"
								>
									<view class=""> 查看物流 </view>
									<view class="" @tap.stop="shure(item.id)">
										确认收货
									</view>
								</view>
								<view
									class="one-button"
									v-if="item.status == 5"
								>
									<!-- <view class=""> 删除订单 </view> -->
								</view>
							</view>
						</view>
					</view>
					<view v-if="current == 3">
						<view
							class="content-text"
							v-for="(item, index) in orderList"
							:key="'order' + index"
							@click="goDetail(item.id)"
						>
							<view class="content-title">
								<view class="title-left">
									<text style="color: #9b9b9d">订单号：</text>
									<text>{{ item.order_sn }}</text>
								</view>
								<view
									class="title-right"
									v-if="item.status == 1"
								>
									待支付
								</view>
								<view
									class="title-right"
									v-if="item.status == 2 || item.status == 3"
								>
									待发货
								</view>
								<view
									class="title-right"
									v-if="item.status == 4"
								>
									待收货
								</view>
								<view
									class="title-right"
									v-if="item.status == 5"
								>
									已完成
								</view>
							</view>
							<view class="the-order-content">
								<view
									class="order-item"
									v-for="(
										goods, goodsindex
									) in item.goods_info"
									:key="'goods' + goodsindex"
								>
									<view class="order-item-left">
										<view class="order-item-left-img">
											<image
												style="
													width: 128rpx;
													height: 128rpx;
												"
												:src="goods.img"
												mode=""
											></image>
										</view>
										<view class="order-item-left-content">
											<view class="">
												{{ goods.goods_name }}
											</view>
											<view
												class=""
												style="
													font-size: 20rpx;
													color: #898989;
												"
											>
												{{ goods.spec }}
											</view>
											<view class="">
												￥{{ goods.price }}
											</view>
										</view>
									</view>
									<view class="order-item-right">
										X{{ goods.num }}</view
									>
								</view>
								<view
									class="price"
									v-if="item.status == 2 || item.status == 1"
								>
									合计：￥{{ item.pay_sum_price }}
								</view>
							</view>
							<view class="content-bottom">
								<view
									class="two-button"
									v-if="item.status == 1"
								>
									<view class=""> 取消订单 </view>
									<view class=""> 去支付 </view>
								</view>
								<view
									class="two-button"
									v-if="item.status == 4"
								>
									<!-- <view class=""> 查看物流 </view> -->
									<view class="" @tap.stop="shure(item.id)">
										确认收货
									</view>
								</view>
								<view
									class="one-button"
									v-if="item.status == 5"
								>
									<!-- <view class=""> 删除订单 </view> -->
								</view>
							</view>
						</view>
					</view>
					<view v-if="current == 4">
						<view
							class="content-text"
							v-for="(item, index) in orderList"
							:key="'order' + index"
							@click="goDetail(item.id)"
						>
							<view class="content-title">
								<view class="title-left">
									<text style="color: #9b9b9d">订单号：</text>
									<text>{{ item.order_sn }}</text>
								</view>
								<view
									class="title-right"
									v-if="item.status == 1"
								>
									待支付
								</view>
								<view
									class="title-right"
									v-if="item.status == 2 || item.status == 3"
								>
									待发货
								</view>
								<view
									class="title-right"
									v-if="item.status == 4"
								>
									待收货
								</view>
								<view
									class="title-right"
									v-if="item.status == 5"
								>
									已完成
								</view>
							</view>
							<view class="the-order-content">
								<view
									class="order-item"
									v-for="(
										goods, goodsindex
									) in item.goods_info"
									:key="'goods' + goodsindex"
								>
									<view class="order-item-left">
										<view class="order-item-left-img">
											<image
												style="
													width: 128rpx;
													height: 128rpx;
												"
												:src="goods.img"
												mode=""
											></image>
										</view>
										<view class="order-item-left-content">
											<view class="">
												{{ goods.goods_name }}
											</view>
											<view
												class=""
												style="
													font-size: 20rpx;
													color: #898989;
												"
											>
												{{ goods.spec }}
											</view>
											<view class="">
												￥{{ goods.price }}
											</view>
										</view>
									</view>
									<view class="order-item-right">
										X{{ goods.num }}</view
									>
								</view>
								<view
									class="price"
									v-if="item.status == 2 || item.status == 1"
								>
									合计：￥{{ item.pay_sum_price }}
								</view>
							</view>
							<view class="content-bottom">
								<view
									class="two-button"
									v-if="item.status == 1"
								>
									<view class=""> 取消订单 </view>
									<view class=""> 去支付 </view>
								</view>
								<view
									class="two-button"
									v-if="item.status == 4"
								>
									<!-- <view class=""> 查看物流 </view> -->
									<view class="" @tap.stop="shure(item.id)">
										确认收货
									</view>
								</view>
								<view
									class="one-button"
									v-if="item.status == 5"
								>
									<!-- <view class=""> 删除订单 </view> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view
				class="content"
				v-else
				style="
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 200rpx;
				"
			>
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/order-null.png"
					style="width: 218rpx; height: 218rpx"
					mode=""
				></image>
				<view class="" style="margin-top: 16rpx;font-size: 26rpx; color: #cacaca">
					暂无订单
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.order-content {
		height: 100vh;
		background-color: #f4f4f4;
		color: #3d3d3d;
		.order-category {
			.category-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22rpx;
				padding-bottom: 22rpx;
				background-color: #fff;
				.list-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					.list-name {
						font-size: 24rpx;
						color: #898989;
					}
					.bar {
						width: 52rpx;
						height: 8rpx;
						border-radius: 4rpx;
						margin-top: 4rpx;
						background-color: $all-color;
					}
				}
			}
			.content {
				margin-top: 20rpx;
				.content-text {
					padding: 0 20rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					background-color: #fff;
					.content-title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 74rpx;
						border-bottom: 2rpx solid #f5f5f5;
						font-size: 22rpx;
						.title-right {
							color: $all-color;
						}
					}
					.the-order-content {
						border-bottom: 2rpx solid #f5f5f5;
						.order-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 180rpx;
							&:last-child {
								border-bottom: 2rpx solid #f5f5f5;
							}
							.order-item-left {
								display: flex;
								align-items: center;
								.order-item-left-img {
									height: 128rpx;
									width: 128rpx;
									margin-right: 18rpx;
									box-sizing: border-box;
									border-radius: 8rpx;
									overflow: hidden;
								}
								.order-item-left-content {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									height: 128rpx;
									font-size: 24rpx;
									color: #1a1a1a;
								}
							}
							.order-item-right {
								font-size: 24rpx;
								color: #1a1a1a;
							}
						}

						.price {
							text-align: right;
							line-height: 50rpx;
							font-size: 20rpx;
						}
					}
					.content-bottom {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						height: 96rpx;
						.two-button {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							view {
								width: 138rpx;
								height: 52rpx;
								border-radius: 26rpx;
								border: 2rpx solid #9b9b9d;
								font-size: 20rpx;
								text-align: center;
								line-height: 52rpx;
								&:last-child {
									margin-left: 22rpx;
									border-color: $all-color;
									color: $all-color;
								}
							}
						}
						.one-button {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							view {
								width: 138rpx;
								height: 52rpx;
								border-radius: 26rpx;
								border: 2rpx solid #9b9b9d;
								font-size: 20rpx;
								text-align: center;
								line-height: 52rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
